<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;

            position: relative;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            margin: auto;

            /*
                水平布局
                   left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right +right = 包含块的内容区的宽度

                当我们开启了绝对定位后:
                    水平方向的布局等式就需要添加left和right两个值
                        此时规则和之前一样只是多添加了两个值:
                            当发生过度约束:
                                如果9个值中没有 auto 则自动调整right值以使等式满足
                                如果有 auto,则自动调整auto值以使等式满足

                        可设置auto的值
                            margin width left right

                        因为left和right的值默认是auto,所以如果不知道left和right
                            则等式不满足时,会自动调整这两个值

                    垂直方向布局的等式必须要满足
                        top + margin-top/bottom + padding-top/bottom + border-top/bottom

            */



            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>